﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/layer/layer/theme/default/layer.css" rel="stylesheet" />
    <style>
        body {
            font-family: "微软雅黑";
        }
    </style>
</head>
<body class="layui-layout-body" style="min-width:1000px;">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" style="height:50px;background-color:#393D49;border-bottom: 1px solid #000; ">
            <div class="layui-logo" style="background-color:#393D49;">后台</div>
            @*头部区域（可配合layui已有的水平导航）*@
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item" style="line-height: 50px;cursor:wait" id="shuaxin"><i class="layui-icon">&#xe9aa;</i>刷新页面</li>
                <li class="layui-nav-item" style="line-height: 50px;">
                    <a href=""><img src="~/layui/images/face/17.gif" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd>
                        <dd><a href="/Home/LoginOut">退了</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black" style="top: 50px;">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test" id="memus">
                </ul>
            </div>
        </div>
        
        <div class="layui-body" style="top: 50px;">
            <div class="layui-tab layui-tab-card" lay-allowclose="true" lay-filter="tabDemo" style="margin: 0px 0;">
                <ul class="layui-tab-title" style="position: fixed;left: 200px;width: 100%;">
                    <li lay-id="首页" class="layui-this">首页<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>
                </ul>
                <div class="layui-tab-content" style="margin-top: 10px;">
                    <div class="layui-tab-item layui-show">
                    <iframe src="/Admin/Index2" scrolling="yes" width="100%" height="619px" style="border-width: 0;"></iframe>
                    </div>
                </div>
            </div>
        </div>
        @*<div class="layui-body" style="top: 50px;">
            <div id="tabzu" class="layui-tab" lay-allowClose="true" lay-filter="tabDemo" style="margin: 0px 0;">
                <ul class="layui-tab-title">
                </ul>
                <div class="layui-tab-content" style="padding:0;">
                </div>
            </div>
        </div>*@


        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>


        <script src="~/js/jquery-2.2.4.min.js"></script>
        <script src="~/layui/layui.js"></script>
        <script src="~/layer/layer/layer.js"></script>
        <script>
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function () {
                var element = layui.element;

                function checkLastItem(arr, i) {
                    return arr.length == (i + 1);
                }

                function getAhtml(obj) {//'" + obj.name + "','" + obj.url + "'
                    return "<a href=\"#\"  class=\"addtab\" u=\"" + obj.url + "\"  t=\"" + obj.name + "\" >" + obj.name + "</a>";
                }

                //动态菜单
                layui.jquery.ajax({
                    url: "/menu/getmenu",
                    method: 'get',
                    success: function (res) {
                        console.log(res);
                        res = res.data;
                        var html = "";
                        for (var i = 0; i < res.length; i++) {
                            var strli = "<li class=\"layui-nav-item lay-unselect \" >";
                            if (res[i].url == '' || res[i].url == null) {
                                strli = strli + "<a href=\"javascript:void(0);\">" + res[i].name + "</a>";
                                console.log(res[i].name)
                            } else {
                                strli = strli + getAhtml(res[i]);
                            }
                            if (res[i].parentId == "0" && !checkLastItem(res, i) && res[i + 1].parentId != "0") {
                                strli = strli + "<dl class=\"layui-nav-child\" >";
                                for (; !checkLastItem(res, i) && res[i + 1].parentId != "0"; i++) {
                                    strli = strli + "<dd>" + getAhtml(res[i + 1]) + "</dd>";
                                }
                                strli = strli + "</dl>";
                            }
                            strli = strli + "</li>";
                            html = html + strli;
                        }
                        layui.jquery("#memus").html(html);
                        layui.element.init(); //一定初始化一次
                    }
                });

                $(document).on('click', '.addtab', function () {
                    var url = $(this).attr("u");
                    var name = $(this).attr("t");
                    if (layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
                        //选项卡已经存在
                        layui.element.tabChange('tabDemo', name);
                        //layer.msg('切换-' + name);
                    } else {
                        //动态控制iframe高度
                        var tabheight = layui.jquery(window).height() - 135;
                        contentTxt = '<iframe src="' + url + '" scrolling="yes" width="100%" height="' + (tabheight) + 'px" style=\"border-width: 0;\"></iframe>';
                        //新增一个Tab项
                        layui.element.tabAdd('tabDemo', {
                            title: name,
                            content: contentTxt,
                            id: name
                        })
                        //切换刷新
                        layui.element.tabChange('tabDemo', name);
                        //layer.msg('新增-' + name);
                    }
                });
            });
        </script>
        <script>
            $("#shuaxin").click(function () {
                var src = $(".layui-tab-item.layui-show").find("iframe").attr("src");
                $(".layui-tab-item.layui-show").find("iframe").attr("src", src);
                layer.msg("刷新", { time: 400 });
            });
            var flag = true;
            $(".layui-logo").click(function () {
                if (flag) {
                    $(".layui-tab-title").animate({
                        left: '0px'
                    },100);
                    $(".layui-bg-black").animate({
                        left: '-200px'
                    });
                    $(".layui-body").animate({
                        left: '0px'
                    });
                    $(".layui-footer").animate({
                        left: '0px'
                    });
                    flag = false;
                }
                else {
                    $(".layui-bg-black").animate({
                        left: '0px'
                    });
                    $(".layui-body").animate({
                        left: '200px'
                    });
                    $(".layui-tab-title").animate({
                        left: '200px'
                    }, 100);
                    $(".layui-footer").animate({
                        left: '200px'
                    });
                    flag = true;
                }
            });
                this.console.log($(window).width());
                if ($(window).width() < 700) {
                    /* 这里是要执行的代码 */
                    $(".layui-tab-title").animate({
                        left: '0px'
                    }, 100);
                    $(".layui-bg-black").animate({
                        left: '-200px'
                    });
                    $(".layui-body").animate({
                        left: '0px'
                    });
                    $(".layui-footer").animate({
                        left: '0px'
                    });
                    flag = false;
                } else {
                    $(".layui-bg-black").animate({
                        left: '0px'
                    });
                    $(".layui-body").animate({
                        left: '200px'
                    });
                    $(".layui-tab-title").animate({
                        left: '200px'
                    }, 100);
                    $(".layui-footer").animate({
                        left: '200px'
                    });
                    flag = true;
                }
        </script>
</body>
</html>